<template>
  <view>
    
    
    <view class="wrap" v-if="check_status===-1">
      <u-form :model="form" ref="uForm" :error-type="errorType">
        <u-form-item label="姓名:" prop="real_name" label-width="120">
          <u-input v-model="form.real_name" placeholder="请输入真实姓名" />
        </u-form-item>
        <u-form-item label="手机号:" prop="phone" label-width="120">
          <u-input v-model="form.phone" placeholder="请输入手机号" />
        </u-form-item>
        <u-form-item label="微信号:" prop="wxnum" label-width="120">
          <u-input v-model="form.wxnum" placeholder="请输入微信号" />
        </u-form-item>
      </u-form>
      <u-button @click="submit" type="warning">提交申请</u-button>
      <u-toast ref="uToast" />
    </view>
    
    <view class="wrap u-p-30 u-text-center" v-if="check_status>-1">
      <p>  {{getCheckStatus.info}}</p>
      <u-button plain size="mini" type="warning" v-if="check_status==0" class="u-m-t-20" @click="check_status=-1">再次提交</u-button>
      <u-button plain size="mini" type="warning" v-if="check_status==2" class="u-m-t-20" @click="invite">立即邀请</u-button>
    </view>
    
    <view class="wrap u-m-t-20">
      <h4>申请流程</h4>
      <div class="u-flex u-row-between u-m-t-20" :style="{color:$u.color['tipsColor']}">
        <div v-for="(item,index) in ['提交申请资料','待审核','审核结果']" :key="index" class="u-text-center processItem"
             :class="{active:getCheckStatus.index==index}"
        >
          <p class="indexBox">{{index+1}}</p>
          <p>{{item}}</p>
        </div>
      </div>
    </view>
  
  </view>
</template>

<script>
export default {
  data() {
    return {
      check_status:-1,
      form: {
        real_name: '',
        phone: '',
        wxnum:''
      },
      
      errorType: ['message'],
      rules: {
        
        real_name: [
          {
            min: 2,
            max:20,
            message: '姓名长度在2-20个字符之间',
            trigger: ['change','blur'],
          },
          {
            required: true,
            message: '请填写姓名',
            trigger: ['change','blur']
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur'],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          }
        ],
        wxnum:[
          {
            required: true,
            message: '请填写微信号',
            trigger: ['change','blur']
          }
        ]
      }
    };
  },
  onLoad(){
    this.getDistributionStatus()
  },
  
  computed:{
    getCheckStatus(){
      
      const map = new Map([
        [-1,{index:0,info:'提交申请资料'}],
        [1,{index:1,info:' 请稍等，您的分销商申请正在审核中...'}],
        [0,{index:2,info:'😞😞很抱歉，您的分销商申请被拒绝了，可联系客服咨询具体原因'}],
        [2,{index:2,info:'恭喜你，审核通过，去邀请好友，赚取分销佣金吧~~'}]
      ])
      return map.get(this.check_status)
    }
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.$http.submitDistribution(this.form).then(res=>{
            this.$refs.uToast.show({
              title: res.mess,
              type: 'success',
              url: '/pages/user/index'
            })
          })
        } else {
          console.log('验证失败');
        }
      });
    },
    getDistributionStatus(){
      this.$http.getDistributionStatus().then(res=>{
        if(res.status===200){
          this.check_status =res.data.check_status
        }
      })
    },
    invite(){
      this.$u.route({
        type:'back'
      })
      
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>
<style lang="scss" scoped>
@import "~uview-ui/index.scss";
.wrap{
  background-color: #fff;
  padding: 30upx;
}
.indexBox{
  $height:100upx;
  background-color: #f5f5f5;
  width:$height;
  height: $height;
  border-radius:400upx;
  margin: 20upx auto;
  line-height:$height;
  font-size: 48upx;
  font-weight: 800;
}
.processItem{
  &.active{
    color:#ff9900;
    .indexBox{
      background-color:#ff9900 ;
      color: #fff;
    }
  }
}
</style>
